<template>
  <div class="component-auditing-add-or-update">
    <el-dialog
      v-model="visible"
      :title="$t('distributionMsg.distributorAudit')"
      :close-on-click-modal="false"
      width="540px"
    >
      <el-form
        ref="dataFormRef"
        :model="dataForm"
        :rules="dataRule"
        label-width="auto"
        @submit.prevent
        @keyup.enter="onSubmit()"
      >
        <el-form-item
          :label="$t('productComm.audit')"
          prop="state"
        >
          <el-radio-group
            v-model="dataForm.state"
            :disabled="!isEdit"
          >
            <el-radio :label="1">
              {{ $t('productComm.pass') }}
            </el-radio>
            <el-radio :label="-1">
              {{ $t('distributionMsg.noPass') }}
            </el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item
          v-if="dataForm.state === -1"
          :label="$t('home.reasons')"
          prop="reason"
        >
          <el-select
            v-model="dataForm.reason"

            :disabled="!isEdit"
            :readonly="!isEdit"
          >
            <el-option
              :label="$t('distributionMsg.insufficientInfo')"
              :value="0"
            />
            <el-option
              :label="$t('distributionMsg.illConditioned')"
              :value="1"
            />
            <el-option
              :label="$t('distributionMsg.noRecruitment')"
              :value="2"
            />
            <el-option
              :label="$t('prodList.other')"
              :value="-1"
            />
          </el-select>
        </el-form-item>
        <el-form-item
          :label="$t('publics.remark')"
          prop="remarks"
        >
          <el-input
            v-model="dataForm.remarks"
            type="textarea"
            :placeholder="$t('publics.remark')"

            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEdit"
          :label="$t('distribUserWallet.operator')"
          prop="sysUsername"
        >
          <div v-if="dataForm.modifier === 0">
            {{ $t('distribUserWallet.system') }}
          </div>
          <el-input
            v-else
            v-model="dataForm.sysUsername"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item
          v-if="!isEdit"
          :label="$t('distribUserWallet.operatorTime')"
          prop="updateTime"
        >
          <el-input
            v-model="dataForm.updateTime"
            :readonly="!isEdit"
          />
        </el-form-item>
        <el-form-item :label="$t('distributionMsg.viewUserAppalyInfo')">
          <div
            class="default-btn"
            @click="info(dataForm)"
          >
            {{ $t('distributionMsg.clickView') }}
          </div>
        </el-form-item>
      </el-form>
      <template #footer>
        <div
          v-if="isEdit"
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('remindPop.cancel') }}
          </div>
          <div
            class="default-btn primary-btn"
            @click="onSubmit()"
          >
            {{ $t('remindPop.confirm') }}
          </div>
        </div>

        <div
          v-if="!isEdit"
          class="dialog-footer"
        >
          <div
            class="default-btn"
            @click="visible = false"
          >
            {{ $t('seckill.close') }}
          </div>
        </div>
      </template>
    </el-dialog>

    <!-- 弹窗, 新增 / 修改 -->
    <Info
      v-if="infoVisible"
      ref="infoRef"
    />
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import Info from './distribution-user-info.vue'

const emit = defineEmits(['refreshDataList'])
const dataRule = {
  state: [
    { required: true, message: $t('distributionMsg.tip2'), trigger: 'change' }
  ],
  reason: [
    { required: true, message: $t('distributionMsg.tip3'), trigger: 'blur' }
  ],
  remarks: [
    { max: 255, message: $t('recruit.limitLangTip2'), trigger: 'blur' }
  ],
  msg: [
    { max: 1000, message: $t('recruit.limitLangTip2').replace('255', '1000'), trigger: 'blur' }
  ]
}
const dataForm = ref({
  auditingId: null,
  state: null,
  reason: null,
  remarks: null,
  msg: null
})
const visible = ref(false)
const isEdit = ref(true)
const init = (data, isEdits) => {
  isEdit.value = isEdits
  isSubmit.value = false
  if (isEdits) {
    data.remarks = ''
  }
  dataForm.value = JSON.parse(JSON.stringify(data))
  if (dataForm.value.state === 0) {
    // 如果为审核窗口则把审核状态置为null,用以rules校验
    dataForm.value.state = null
  }
  visible.value = true
}
defineExpose({ init })

const infoVisible = ref(false)
const infoRef = ref(null)
/**
 * 新增 / 修改
 * @param data
 */
const info = (data) => {
  infoVisible.value = true
  nextTick(() => {
    infoRef.value?.init(data)
  })
}

const isSubmit = ref(false)
const dataFormRef = ref(null)
/**
 * 表单提交
 */
const onSubmit = () => {
  dataFormRef.value?.validate((valid) => {
    if (valid) {
      const param = dataForm.value
      if (isSubmit.value) {
        return false
      }
      isSubmit.value = true
      http({
        url: http.adornUrl('/distribution/distributionAuditing'),
        method: 'put',
        data: http.adornData(
          param
          , false)
      })
        .then(() => {
          ElMessage({
            message: $t('publics.operation'),
            type: 'success',
            duration: 1500,
            onClose: () => {
              visible.value = false
              emit('refreshDataList')
            }
          })
        })
        .catch(() => {
          isSubmit.value = false
        })
    }
  })
}

</script>
